<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .tab {
        width: 500px;
        height: 300px;
        background-color: antiquewhite;
      }
      ol {
        height: 20%;
        width: 100%;
        background-color: aquamarine;
        display: flex;
        li {
          width: 20%;
          height: 100%;
          background-color: rgb(251, 237, 237);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .active {
          background-color: rgb(99, 80, 79);
          color: aliceblue;
        }
      }
      ul {
        height: 80%;
        width: 100%;
        background-color: brown;
        li {
          width: 100%;
          height: 100%;
          background-color: rgb(212, 169, 167);
          display: none;
          line-height: 50px;
          align-items: center;
          font-size: 49px;
        }
        .displayed {
          display: block;
        }
      }
    </style>
  </head>
  <body>
    <div class="tab">
      <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ol>
      <ul>
        <li class="displayed">11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
        <li>55</li>
      </ul>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
      // var ul = document.querySelector("ul");
      // var ol = document.querySelector("ol");
      // var ulLI = document.querySelectorAll("ul>li");
      // var olLI = document.querySelectorAll("ol>li");
      // function changeTab(index) {
      //   ulLI.forEach((item) => {
      //     item.classList.remove("displayed");
      //   });
      //   olLI.forEach((item) => {
      //     item.classList.remove("active");
      //   });
      //   ulLI[index].classList.add("displayed");
      //   olLI[index].classList.add("active");
      // }
      // olLI.forEach((item, index) => {
      //   item.setAttribute("data-num", index);
      // });
      // ol.addEventListener("click", function (e) {
      //   if (e.target.tagName.toLocaleUpperCase() === "LI") {
      //     //   console.log(e.target.dataset.num);
      //     changeTab(e.target.dataset.num);
      //   }
      // });
      // var tabIndex = 0;
      // setInterval(function () {
      //   changeTab(tabIndex);
      //   tabIndex++;
      //   tabIndex = tabIndex >= olLI.length ? 0 : tabIndex;
      // }, 3000);

      $(document).ready(function () {
        var $ul = $("ul");
        var $ol = $("ol");
        var $ulLI = $("ul > li");
        var $olLI = $("ol > li");

        function changeTab(index) {
          $ulLI.removeClass("displayed");
          $olLI.removeClass("active");
          $ulLI.eq(index).addClass("displayed");
          $olLI.eq(index).addClass("active");
        }

        $olLI.each(function (index) {
          $(this).attr("data-num", index);
        });

        $ol.on("click", "li", function () {
          var index = $(this).data("num");
          changeTab(index);
        });

        var tabIndex = 0;
        setInterval(function () {
          changeTab(tabIndex);
          tabIndex = (tabIndex + 1) % $olLI.length;
        }, 3000);
      });
    </script>
  </body>
</html>
